<template>
  <div class="user-wallet">
    <div class="top-header">代下单</div>
    <div class="wallet-container">
      <h3>代您下单</h3>
      <div class="empty-container">
        <img src="../../../assets/imgs/user/empty.png" alt=" empty">
        <div class="text-wrap">
          <h5>您暂时没有自动下单的商品哦~</h5>
          <p>什么是自动下单的商品？</p>
          <p>降价代下单: 在商品详情页点击降价通知，订阅降价代下单的商品</p>
          <p>到货代下单: 在商品详情页、购物车，订阅到货代下单的商品</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 在这里写 Composition API 代码
</script>

<style scoped lang="scss">
.user-wallet {
  height: 100vh;

  .top-header {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    padding: 16px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }

  .wallet-container {
    background-color: #fff;
    height: auto;
    padding: 20px;


    h3 {
      // margin-bottom: 15px;
    }

    .empty-container {
      display: flex;
      align-items: flex-start;
      gap: 20px;

    justify-content: center;
      img {
        width: 124px;
        height: 135px;
      }

      .text-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        color: #333;

        h5 {
          margin: 0 0 10px;
          font-size: 14px;
        }

        p {
          margin: 5px 0;
          font-size: 12px;
          line-height: 1.4;
        }
      }
    }
  }
}
</style>
